<template>
  <a-popover
    trigger="click"
    placement="bottomRight"
    :autoAdjustOverflow="true"
    :arrowPointAtCenter="true"
    overlayClassName="header-notice-wrapper"
    @visibleChange="handleHoverChange"
    :overlayStyle="{ width: '200px', top: '50px' }">
    <template slot="content">
      <a-spin :spinning="loadding">
        <!-- <a-tabs>
          <a-tab-pane key="1" tab="预警信息" style="width: 200px"> -->
        <div class="news-title">
          预警信息
        </div>
        <a-list>
          <a-list-item v-for="(record, index) in announcement" :key="index" class="new-list">
            <div>
              <p><a href="#" class="new-title">{{record.title}}</a></p>
            </div>
            <div>
              <a-tag color="red" class="new-len">{{record.len}}</a-tag>
            </div>
          </a-list-item>
        </a-list>
          <!-- </a-tab-pane>
        </a-tabs> -->
      </a-spin>
    </template>
    <span @click="fetchNotice" class="header-notice">
      <a-badge :count="msgTotal">
        <a-icon style="font-size: 16px; padding: 4px" type="bell" />
      </a-badge>
    </span>
  </a-popover>
</template>
<script>
import { getAction, putAction } from '@/api/manage'
import store from '@/store/'
import axios from 'axios'
export default {
  name: "Test",
  data () {
    return {
      loadding: false,
      base: 'https://www.fastmock.site/mock/0287ee4356690e49574dbd9ee3568586/mymock_test',
      // url: {
      //   warnNews1: 'warn/type1',
      //   warnNews2: 'warn/type2'
      // },
      url: ['/warn/type1', '/warn/type2'],
      announcement: [],
    };
  },
  computed: {
    msgTotal() {
      let total = 0;
      for(let i = 0; i < this.announcement.length; i++){
        total = parseInt(this.announcement[i].len) + total
      }
      return total;
    }
  },
  mounted() {
    this.loadData();
    // this.initWebSocket();
  },
  methods: {
    async loadData() {
      let that = this;
      for(let i = 0; i < this.url.length; i++){
        that.announcement.push((await axios.get(this.base + this.url[i])).data.data)
      }
    },
    fetchNotice () {
      if (this.loadding) {
        this.loadding = false
        return
      }
      this.loadding = true
      setTimeout(() => {
        this.loadding = false
      }, 200)
    },
    handleHoverChange (visible) {
      this.hovered = visible;
    },
  }
}
</script>
<style lang="css">
  .header-notice-wrapper {
    top: 50px !important;
  }
</style>
<style lang="less" scoped>
  .header-notice{
    display: inline-block;
    transition: all 0.3s;

    span {
      vertical-align: initial;
    }
  }
  .news-title {
    font-size: 18px;
    text-align: center;
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
    color: #000;
  }
  .new-list {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
    .new-title {
      color: #000;
      padding-right: 10px;
    }
    .new-len {
      vertical-align: top;
      margin-top: -5px;
    }
  }
</style>